import { Box, Page } from '@/components';
import { useNavigate } from 'react-router-dom';
import { exemplesNameList } from '../../routes/index';
import styles from './styles.module.less'
const CompCards = () => {
  const navigate = useNavigate();
  return (
    <Page className={styles.compCards}>
      <div className={styles.exemples}>
        {exemplesNameList.map((exemple, index) => {

          const title = exemple.name?.replace(/Exemple/, '').split('').map((item, index) => {
            if (index === 0) {
              return item.toUpperCase()
            } else {
              return item
            }
          }).join('')
          return (
            <Box
              onClick={() => {
                navigate(exemple.path);
              }}
              radius={6}
              shadow='base'
              shadowShow="always"
              className={styles.exemple}
              key={index}
            >
              {title}
            </Box>
          )
        })}
      </div>
    </Page>
  )
}
export default CompCards